<template>
  <div class="billing-order-index">
    <el-card>
      <el-form class="pageQuery" label-position="top">
        <el-form-item label="单号">
          <el-input v-model="list.search.order_sn"></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="list.search.title"></el-input>
        </el-form-item>
        <el-form-item label="商户">
          <el-select v-model="list.search.merchant_id" placeholder="请选择活动区域">
            <el-option v-for="(item, index) in  dic.merchant" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="list.search.status" placeholder="请选择活动区域">
            <el-option v-for="(item, index) in  dic.status" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="list.search.child"  :clearable="false">
            <el-option label="我的账单" :value="false"></el-option>
            <el-option label="代理账单" :value="true"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>


    <el-card>
      <div class="tableButton">
        <el-button @click="addOpen(true)">新建账单</el-button>
      </div>
      <el-table :data="list.items" style="margin-bottom: 10px" border max-height="800">
        <el-table-column prop="order_sn" label="单号" width="180"></el-table-column>
        <el-table-column prop="merchant_name" label="商户" width="180"></el-table-column>
        <el-table-column prop="start_dt" label="开始时间" width="180"></el-table-column>
        <el-table-column prop="end_dt" label="截止时间" width="180"></el-table-column>
        <el-table-column prop="amount" label="金额" width="180"></el-table-column>
<!--        <el-table-column prop="title" label="名称" width="180"></el-table-column>-->
        <el-table-column prop="status_name" label="状态" width="180"></el-table-column>
        <el-table-column prop="audit_user_name" label="审核人" width="180"></el-table-column>
        <el-table-column prop="create_dt" label="创建时间" width="180"></el-table-column>
<!--        <el-table-column prop="title" label="确认时间" width="180"></el-table-column>-->
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="{row}">
            <div class="table-operation">
              <el-link type="primary" v-if="$api.buttonPower(70)" @click="detailOpen(row)">查看</el-link>
            </div>
          </template>
        </el-table-column>
        <template slot="empty">
          <myEmpty></myEmpty>
        </template>
      </el-table>
      <myPaging :queryInfo="list.search" :getListData="getList"></myPaging>
    </el-card>

<!--  -->
<!--    <el-drawer :visible.sync="detail_box.show" title="卡片详情" size="60%" custom-class="drawerWidth">-->
<!--      <iot-card-detail :request="detail_box.request" v-if="detail_box.show" @close="detailClose"></iot-card-detail>-->
<!--    </el-drawer>-->
    <!--新增弹窗-->
    <el-dialog :visible.sync="add_box.show" title="新增账单"  width="500px">
      <el-form  label-width="80px" label-position="right">
<!--        <el-form-item label="名称">-->
<!--          <el-input v-model="add_box.form.title"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="商家">
          <el-select v-model="add_box.form.merchant_id" placeholder="请选择活动区域">
            <el-option v-for="(item, index) in  dic.merchant" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="周期">
          <el-date-picker v-model="add_box.form.cycle" type="daterange" value-format="yyyy-MM-dd"
                          range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="add_box.form.remark"></el-input>
        </el-form-item>

        <el-form-item class="buttonBox">
          <el-button type="primary" @click="addSubmit">提交</el-button>
          <el-button @click="addOpen(false)">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-drawer :visible.sync="detail_box.show" title="账单详情" size="60%" custom-class="drawerWidth">
      <iot-billing-detail v-if="detail_box.show" :request="detail_box.request" @close="detailClose"></iot-billing-detail>
    </el-drawer>
  </div>
</template>

<script>
import IotBillingDetail from "@/components/iotCard/billing_order/detail";
export default {
  name: "index",
  components: {IotBillingDetail},
  data(){
    return{
      dic:{
        status:[],
        merchant:[],
      },
      list:{
        search:{
          page: 1,
          size: 10,
          total: 0,
          child: false,
        },
        items:[],
      },
      detail_box:{
        show: false,
        request:{
          id: 0
        }
      },
      add_box:{
        show: false,
        form:{
          merchant_id: null,
          cycle: null,
          remark: '',
        }
      }
    }
  },
  mounted(){
    // console.log(this.$route.query.child)
    // if (this.$route.query.child){
    //   this.list.search.child = true
    // }
    this.getDic()
    this.getList()
  },
  methods:{
    getList(){
      this.$api.order.billingList(this.list.search, res=>{
        if (!res.status){
          return this.$message.error(res.message)
        }
        this.list.items = res.data.list;
        this.list.search.total = res.data.page.total;
      })
    },
    detailOpen(row) {
      this.detail_box.show = true
      this.detail_box.request ={
        id: row.id,
      }
    },
    detailClose(level){
      this.detail_box.show = false
      this.detail_box.request = {}
      if (level === 1){
        return
      }
      this.getList();
    },
    addOpen(show=true){
      this.add_box.show = show
      // this.add_box.form = {}
    },
    addSubmit(){
      // this.add_box.show = false
      let body = this.$tool.copyJSON(this.add_box.form)
      if (body.cycle){
        body.start_dt = body.cycle[0]??''
        body.end_dt = body.cycle[1]??''
      }

      console.log("添加提交", body)
      this.$api.order.billingCreate(body, res=>{
        if (!res.status){
          return this.$message.error(res.message)
        }
        this.$message.success("创建成功!");
        this.$router.push('/billing/detail?index=1')
      })
    },
    getDic(){
      let types = [
        this.$api.Enum.DicTypeResellerList,
        this.$api.Enum.DicOrderStatus,
      ]
      this.$api.foundation.dicListExtendCache(types, {}, res => {
            this.dic.status = res[this.$api.Enum.DicOrderStatus];
            this.dic.merchant = res[this.$api.Enum.DicTypeResellerList];
          }
      );
    }
  }
}
</script>

<style scoped>
.tableButton {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
</style>